import { _decorator, Component, Node, SpriteFrame } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { forkJoin, Observable, of } from 'rxjs';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
import { lm } from '../../LobbyManager';
import { v3 } from 'cc';
import { AnimationPlay } from '../../../../scripts/libs/rxjs/cc3/AnimationPlay';
import { Animation } from 'cc';
import { Timer } from '../../../../scripts/libs/rxjs/cc3/CreatorSchedule';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { Sprite } from 'cc';
import { Label } from 'cc';
import { color } from 'cc';
import { am } from '../../../../scripts/managers/AudioManager';
const { ccclass, property } = _decorator;

@ccclass('HardTipPanel')
export class HardTipPanel extends BasePanel {

    hard = ReactiveProperty.Create(0);

    @property(Node)
    mainNode: Node = null;

    @property(SpriteFrame)
    headSpriteFrame: SpriteFrame = null;

    @property(Sprite)
    headSprite: Sprite = null;

    @property(SpriteFrame)
    shineSpriteFrame: SpriteFrame = null;

    @property(Sprite)
    shineSprite: Sprite = null;

    @property(Sprite)
    circleSprite: Sprite = null;

    @property(Label)
    textLabel: Label = null;

    @property(Label)
    text1Label: Label = null;

    useObserves() {
        return [
            this.hard.subscribe(this.refresh.bind(this)),
        ];
    }

    refresh() {
        if (this.hard.value == 2) {
            this.headSprite.spriteFrame = this.headSpriteFrame;
            this.shineSprite.spriteFrame = this.shineSpriteFrame;
            this.circleSprite.color = color().fromHEX('ed2f2a');
            this.textLabel.color = color().fromHEX('#FF2B23');
            this.textLabel.outlineColor = color().fromHEX('#FFD2D2');
            this.textLabel.string = 'VERY HARD';
            this.text1Label.color = color().fromHEX('#FF2B23');
            this.text1Label.outlineColor = color().fromHEX('#FFD2D2');
        }
    }

    openPanelAnim(): Observable<any> {

        this.mainNode.setScale(lm.getAdaptiveScaleV3());


        if (this.hard.value == 1) {
            Timer(0, this.node).subscribe(_ => {
                am.playSfx({ clipName: `ab_lobby/Audio/sfx/daemonhard` });
            }).addTo(this.node);
        } else if (this.hard.value == 2) {
            Timer(0, this.node).subscribe(_ => {
                am.playSfx({ clipName: `ab_lobby/Audio/sfx/daemonveryhard` });
            }).addTo(this.node);
        }

        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            AnimationPlay(this.getComponent(Animation), 'panel_in'),
            // TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }

    afterOpen(): Observable<string> {
        Timer(1.2, this.node).subscribe(_ => {
            HardTipPanel.CloseProcess();
        }).addTo(this.node);
        return of(null);
    }

}

